<template>
  <div id="centreRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line"></icon>
        </span>
        <div class="d-flex">
          <span class=" text mx-2">营业额增长幅度</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" style="width:13.375rem;height:2.28rem" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ["地区", "店铺",  "今日营业额",'本月营业额',"营业额对比"],
        data: [
          ["遵义", "探花海（汇川一店）", 247.88, 10453.64, "<span  class='colorGrass'>↑45%</span>"],
          ["长沙", "探花海（新时代广场百货店）", 175.12, 8236.15, "<span  class='colorGrass'>↑33%</span>"],
          ["广州", "探花海（聚金园二街百货店）", 170.29, 7687.02, "<span  class='colorGrass'>↑20%</span>"],
          ["潍坊", "探花海（城市广场店）", 214.57, 9592.39, "<span  class='colorGrass'>↑34%</span>"],
          ["长春", "探花海（红旗街百货店）", 229.46, 10992.74, "<span  class='colorGrass'>↑35%</span>"],
          ["深圳", "爱联祥云探花海", 148.33, 8462.91, "<span  class='colorGrass'>↑23%</span>"],
          ["长沙", "星城国际探花海", 221.17, 11358.63, "<span  class='colorGrass'>↑34%</span>"],
          ["东营", "天顺隆探花海", 198.81, 9496.27, "<span  class='colorRed'>↑16%</span>"],
          ["东营", "润丰探花海", 269.47, 9263.14, "<span  class='colorRed'>↑18%</span>"],
          ["济南", "探花海（科院路百货店）", 259.54, 11421.58, "<span  class='colorRed'>↓13%</span>"],
          ["济南", "佛山街探花海", 147.64, 8643.81, "<span  class='colorRed'>↑14%</span>"],
          ["济南", "九爷百货", 143.82, 10339.28, "<span  class='colorRed'>↓9%</span>"],
          ["济南", "美团-嬉趣阁", 276.11, 11742.33, "<span  class='colorGrass'>↑36%</span>"],
          ["长春", "探花海·新零售（北胡同店）", 169.62, 8546.17, "<span  class='colorGrass'>↑6%</span>"],
          ["长春", "爱沐成人用品店（长春探花海）", 250.21, 9007.95, "<span  class='colorGrass'>↑26%</span>"]
        ],

        rowNum: 3, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        // index: true,
        columnWidth: [50],
        align: ["center"],
        hours:1,
      }
    };
  },
  components: {},
  mounted() {
    this.getTime();
  },
  methods: {
    getTime() {
      let data = new Date();
      this.hours = data.getHours();
      this.config.data.forEach(el => {
        el[2]=(el[2]*(this.hours/10)).toFixed(2)
      });
      setTimeout(() => {
        this.getTime();
      }, 360000);
    }
  }
};
</script>

<style lang="scss">
#centreRight1 {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>